<template>
  <div>
    <!-- id绑定randomId -->
    <!-- 加载Ueditor的容器 -->
    <script :id="randomId" type="text/plain" style="height: 300px;"></script>
  </div>
</template>

<script>

export default {
  name: 'UE',
  props: { // 接收父组件的实例 -- ueditor文本值
    value: {
      default: function () {
        return ''
      }
    }
  },
  data () {
    return {
      randomId: 'editor_' + Math.random() * 100000000000000000,
      // 编辑器实例
      instance: null,
      ready: false
    }
  },
  watch: { // 实时监控数据变化
    value: function (val, oldVal) {
      if (val != null && this.ready) {
        // eslint-disable-next-line no-undef
        this.instance = UE.getEditor(this.randomId) // 实例化编辑器 -- 也可以传入参数定制编辑器的特性
        this.instance.setContent(val) // 设置编辑器的值
      }
    }
  },
  mounted () {
    this.initEditor()
  },

  beforeDestroy () {
    if (this.instance !== null && this.instance.destroy) {
      this.instance.destroy()
    }
  },
  methods: {
    initEditor () {
      this.$nextTick(() => { // 下次dom更新完成后执行
        // eslint-disable-next-line no-undef
        this.instance = UE.getEditor(this.randomId)
        this.instance.addListener('ready', () => { // ueditor监听器
          this.ready = true
          this.$emit('ready', this.instance) // 触发当前实例的事件 -- ready是父组件的方法
        })
      })
    },
    getUEContent () {
      return this.instance.getContent()
    },
    setText (con) {
      // eslint-disable-next-line no-undef
      this.instance = UE.getEditor(this.randomId)
      this.instance.setContent(con)
    }
  }
}
</script>
